<style>
    input[type=file] {
        display: none;
    }
</style>
<div id="main" class="pd14 vany_authority">
    <div class="vany_treeTable pd14">
        <!--面包屑-->
        <div class="pb10" id="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }" th:text="#{breadcrumb.systemSetting}"/>
                <el-breadcrumb-item th:text="#{breadcrumb.ruleSetting}"/>
            </el-breadcrumb>
            <i-favorite></i-favorite>
        </div>
        <div>
            <el-form :inline="true">
                <el-row>
                    <el-col :span="20">
                        <el-form-item th:label="#{kpi.family}">
                            <el-select th:placeholder="#{kpi.family}" clearable="true" v-model="bindFormData.family">
                                <el-option v-for="family in searchData.familyList" :label="family"
                                           :value="family"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item th:label="#{kpi.item}">
                            <el-select th:placeholder="#{kpi.item}"  clearable="true" v-model="bindFormData.kpiItemId">
                                <el-option v-for="item in searchData.kpiItemList" :label="item.kpiItemName"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item th:label="#{kpi.category}">
                            <el-select th:placeholder="#{kpi.category}" clearable="true" v-model="bindFormData.ruleScope">
                                <el-option v-for="category in searchData.categoryList" :label="category.code"
                                           :value="category.code"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="success" th:text="#{common.search}" @click="loadSearchData">search</el-button>
                        <el-button type="success" th:text="#{common.export}" @click="exportExcel">Export</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-col>
                    <el-upload
                            name="file"
                            ref="upload"
                            class="upload-demo"
                            th:action="@{/kpi/rule/import}"
                            accept=".xls,.xlsx"
                            :show-file-list="true"
                            :file-list="upload.fileList"
                            :on-success="handleOnSuccess"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传
                        </el-button>
                        <el-button style="margin-left: 10px;" size="small" :loading="download.downLoadStatus"
                                   type="success" @click="downLoadTemplate">下载模板
                        </el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-table :data="table.tableData" :height="table.tableHeight" border id="kpiRule">
                <el-table-column th:label="#{kpi.rule.table.header.row1.col1}">
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col1}" prop="kpiItemId"
                                     width="60"></el-table-column>
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col2}" prop="family"
                                     width="80"></el-table-column>
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col3}" prop="kpiItemName"
                                     width="200"></el-table-column>
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col4}" prop="kpiDes"
                                     width="100"></el-table-column>
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col5}" prop="ruleScope"></el-table-column>
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col6}" prop="weight"></el-table-column>
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col7}" prop="itemType" width="100"></el-table-column>
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col8}" prop="roleChosen"
                                     width="200"></el-table-column>
                </el-table-column>
                <el-table-column th:label="#{kpi.rule.table.header.row1.col2}">
                    <el-table-column th:label="10" prop="value10" width="60"></el-table-column>
                    <el-table-column th:label="9" prop="value9" width="60"></el-table-column>
                    <el-table-column th:label="8" prop="value8" width="60"></el-table-column>
                    <el-table-column th:label="7" prop="value7" width="60"></el-table-column>
                    <el-table-column th:label="6" prop="value6" width="60"></el-table-column>
                    <el-table-column th:label="5" prop="value5" width="60"></el-table-column>
                    <el-table-column th:label="4" prop="value4" width="60"></el-table-column>
                    <el-table-column th:label="3" prop="value3" width="60"></el-table-column>
                    <el-table-column th:label="2" prop="value2" width="60"></el-table-column>
                    <el-table-column th:label="1" prop="value1" width="60"></el-table-column>
                    <el-table-column th:label="0" prop="value0" width="100"></el-table-column>
                </el-table-column>
                <el-table-column th:label="#{kpi.rule.table.header.row1.col3}">
                    <el-table-column th:label="#{kpi.rule.table.header.row2.col10}" prop="isModify"></el-table-column>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
            <el-row>
                <div style="color: #F00;margin-left: 15px;margin-top: 15px">
                    <p>注：1.每个Category的考核项权重加和为100% </p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.考核项score=评分*weight/最高评分分值</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.Modify为Y表示该Category的这项KPI在默认关账日期之后可以修改数据</p>
                </div>
            </el-row>
        </div>
    </div>
</div>
<script type="text/javascript" src="templates/kpi/js/rule.js?ts=new Date().getTime()"></script>
